@media (max-width: 768px){
body{ min-width:320px;}
.container, .urban-ecology-sec .container, .investments-sec .container, .in-the-media .container, .policy-frameworks .container, .home-news-sec .container{ max-width:96%; margin:0 auto !important;}
.policy-frameworks .container{ padding:0;}
.logo img{ max-height:60px;}
.header{ padding:10px; position:absolute;}
.header .nav-btn, .header .nav-search{ margin:12px 15px 0 0;}
.header .nav-btn{ margin-top:9px;}
.banner-bottom h2 br{ display:none;}
.search-widget { left: 20px; right: 20px;top: 0;}
.home-nav li{ display:block; width:100%;}
.home-nav li a span br{ display:none;}
.home-nav li a{ padding-top:16px; padding-bottom:16px;}
.home-nav li{ border:0;border-bottom:1px solid #dfe3e5;}
.banner-bottom h2{ font-size:30px;}
.built-environments .each{ display:block; width:100%; text-align: center;}
.graphic-widget ul li{ position:relative; display:block; margin-bottom:10px; right:auto !important; left:auto !important; top:auto !important; bottom:auto !important;}
.graphic-widget{ background:none; height:auto; margin-bottom:0; max-width:300px; width:auto;}
.graphic-widget p{ position:relative; top:0; margin-bottom:35px;}
.graphic-widget ul li:nth-child(4), .graphic-widget ul li:nth-child(5){ padding-left:40px;}
.graphic-widget ul li:nth-child(4):before, .graphic-widget ul li:nth-child(5):before{ left:14px;}
.urban-ecology-sec .half { float: none; width: auto;}
.urban-ecology-sec .investments-col { display: block; margin-top: 10px; padding-right: 0; width: auto;}
.investments-sec .table{ display:block;}
.investments-sec .table-cell { display: block; width: auto;}
.investments-sec .table-cell.text-right img{ width:100%;}
.investments-sec .investments-col { display: block;  padding-right: 0; width: auto;}
.investments-sec .investments-row{ margin-bottom:50px;}
.investments-sec{ background:#F1F5F8; padding-right:0;}
.investments-sec .investments-row { margin-bottom: 0;}
.investments-sec.city-management .investments-row { margin-bottom: 50px;}
.policy-frameworks .each{ width:50%;}
.footer .each:first-child { margin-left: 0;}
.footer .each{ width:100%; display:block; text-align:center;}
.footer .each ul{ display:none;}
.policy-frameworks .policy-framework{ margin-bottom:40px;}
.policy-frameworks .each:last-child .policy-framework{ margin-bottom:0;}
.main-nav{ padding:115px 65px 65px 65px;}
.main-nav .each { display: block; width: auto;}
.main-nav .each > div > ul > li > ul{ display:none;}
.main-nav .each > div{ display:none; margin-bottom: 20px;}
.main-nav .each > div > ul{ padding-left:10px;}
.main-nav .each > div > ul:before{ left:10px;}
.subpage-banner.small, .subpage-banner { height: 260px;}
.subpage-nav ul li{ float:none; margin-bottom:7px;}
.subpage-nav ul li a{ border-radius:0; -webkit-border-radius:0; -moz-border-radius:0;}
.split-col-2{-webkit-column-count:1;-moz-column-count: 1;column-count: 1;column-gap:0;-webkit-column-gap:0;-moz-column-gap:0;}
.main-nav .nav-close-btn{ left:20px; top:20px;}
.members-list{ margin:0 -20px;}
.members-list li{ width:30%; padding:0 20px;}
.subpage-banner .site-title{ font-size:26px;}
.news-row { margin: 0 -10px;}
.news-row .each{ padding:0 10px; width:50%;}
.subpage-top .news-detail .left, .subpage-top .news-detail .right {width: 100%; float:none;}
.subpage-top .news-detail .left{ margin-bottom:50px;}
.offices .offices-widget { float: none; width: auto; margin-bottom:40px;}
.offices .offices-widget:nth-child(2n+2) { float: none;}
.careers-left, .enquiries-left{ margin-bottom:50px;}
.careers-right, .careers-left,
.enquiries-right, .enquiries-left {float: none; width: auto;}
.urban-ecology-bottom .each .image, .urban-ecology-bottom .each .content { display: block; width: 100%;}
.urban-ecology-bottom .each .content{ padding:50px;}
.urban-ecology-bottom .each { display: flex; flex-flow: column nowrap;}
.urban-ecology-bottom .each .image { order: -1;}
.subpage-top .left{ margin-bottom:50px;}
.subpage-top .left, .subpage-top .right { float: none; width: auto;}
.pf-bottom .each-row { margin: 0;}
.pf-bottom .each { float: none; padding: 0; width: 100%;}
.pf-bottom .each ul li { padding: 0 0 5px 20px;}
.pf-bottom .each{ padding-bottom:30px;}
.cities-sec .each{ width:50%; padding-bottom:50px;}
.project-top .project-left { float: none; width: auto;margin-bottom: 50px;}
.project-top .project-left p { margin-bottom: 40px;}
.project-top .project-right { float: none;width: auto;}
.project-gallery li{ width:50%;}
.video-section{ padding-top:15px;}
.video-section:before{ height:25%;}
.section-1 ul li, .section-3 ul li{ width:100%; display:block; text-align:center;}
.section-1, .section-2, .video-section, .section-3{ text-align:center;}
.section-2 .heading h2, .section-1 .heading h2, .video-section .heading h2, .section-3 .heading h2 { font-size: 22px;}
.development-sec .left, .development-sec .right {  float: none; text-align: center;  width: auto;}
.key-milestones .milestone > img{ max-width:150px;}
.key-milestones .flipster__item--current .milestone .content { padding-left: 160px; padding-top: 0;}
.key-milestones .flipster__item--current .milestone { width: 430px;}
.investments-sec.city-management .content,
.investments-sec.city-management .collage4{ display:block; width:auto;}
.investments-sec .each{ float:none; width:auto;}
#ctf .ctf-item{ width:auto; display:block; padding-bottom:15px;}
#milestones-carousel{ display: none !important; }
.milestones-owl-carousel{ text-align: center; max-width: 96%; margin:0 auto;padding:20px 0 10px}
.milestones-owl-carousel .owl-item img{ display: inline-block;width: 120px;border-radius: 100%; margin-bottom: 15px;border: 1px solid #3e5362;background: #6d8493;}
.milestones-owl-carousel .owl-item .stone{color: #ccc; display: block;padding: 0 0 15px 0;margin:0;}
.milestones-owl-carousel .owl-item h3{font-size: 23px;color: #fff;margin-bottom: 10px;}
.milestones-owl-carousel .owl-dots .owl-dot{ width: 10px;height: 10px;border-radius: 100%;background: #3a5160;display: inline-block;margin: 0 1.3px;}
.milestones-owl-carousel .owl-dots .owl-dot.active{ background: #6d8493; }
.happiness-slider{ display: none; }
.happiness-slider-mobile{ display: block; }
}
@media (max-width: 500px) {
.home-nav li a{ font-size:17px;}
.home-nav li a img{ max-height:32px;}
.banner-bottom h2, h2 { font-size: 26px;}
.banner-bottom p{ margin-top:10px;}
.policy-frameworks .each{ width:100%; float:none;}
.members-list{ margin:0 0;}
.members-list li{padding: 0 10px 0 0; width: 50%;}
.news-row { margin: 0;}
.news-row .each{ padding:0; width:100%; float:none;}
.media .post-category{ margin-left:0;}
.media .post-date{ margin-right:0;}
.news-detail .left .btn-pdf { display: block; float: none;margin-top: 30px;}
.clr-500{ clear:both; display:block;}
.pom-default {margin-right: 10px; margin-top: -30px;}
.subpage-top .news-detail .right{ padding:0; background:none;}
.urban-ecology-bottom .each .content{ padding:30px 20px;}
.urban-ecology-bottom .each .content h3 br{ display:none;}
.urban-ecology-bottom .each .content h3 { font-size: 20px; line-height: 30px;}
.city-management-bottom h2, .what-we-do-bottom h2, .inv-bottom h2{ font-size:22px;}
.cities-sec .each{ width:100%; float:none;}
.cities-sec .cities-widget-content h3{ font-size:19px;}
.subpage-banner .page-title{ font-size:22px;line-height: normal;}
.subpage-banner .page-title span{ font-size:14px;}
.project-gallery li{ width:100%; float:none;}
.video-section:before{ height:15%;}
.fancybox-video:before{ width: 60px; height: 60px; background-size:cover; margin:-30px 0 0 -30px;}
.key-milestones .milestone > img{ float:none;}
.key-milestones .flipster__item--current .milestone .content{ padding-left:0; padding-top:20px;}
.key-milestones .flipster__item--current .milestone { width: 330px; margin:0 auto; text-align:center;}
.collage4 img{width: 32.8%;}
.key-milestones .heading h2{ max-width: 280px;margin: 0 auto 10px;}
}

@media (min-width: 769px) and (max-width:1010px) {
.container, .urban-ecology-sec .container, .investments-sec .container, .in-the-media .container, .policy-frameworks .container, .home-news-sec .container{ max-width:760px;}
.policy-frameworks .each{ width:50%;}
.footer .each:first-child { margin-left: 0;}
.policy-frameworks .container{ padding:0;}
.footer .each{ width:210px;}
.urban-ecology-sec .half { float: none; width: auto;}
.urban-ecology-sec .investments-col { display: block; margin-top: 10px; padding-right: 0; width: auto;}
.investments-sec .table-cell { display: block; width: auto;}
.investments-sec .table-cell.text-right img{ width:100%;}
.investments-sec .investments-col { display: block;  padding-right: 0; width: auto;}
.investments-sec .investments-row{ margin-bottom:50px;}
.investments-sec{ background:#F1F5F8; padding-right:0;}
.investments-sec .investments-row { margin-bottom: 0;}
.investments-sec.city-management .investments-row { margin-bottom: 50px;}
.main-nav{ padding:115px 65px 65px 65px;}
.members-list li{ width:30%;}
.news-row { margin: 0 -10px;}
.news-row .each{ padding:0 10px;}
.subpage-top .news-detail .left, .subpage-top .news-detail .right {width: 100%; float:none;}
.subpage-top .news-detail .left{ margin-bottom:50px;}
.urban-ecology-bottom .each .image, .urban-ecology-bottom .each .content { display: block; width: 100%;}
.urban-ecology-bottom .each .content{ padding:50px;}
.urban-ecology-bottom .each { display: flex; flex-flow: column nowrap;}
.urban-ecology-bottom .each .image { order: -1;}
.subpage-top .left{ margin-bottom:50px;}
.subpage-top .left, .subpage-top .right { float: none; width: auto;}
.cities-sec .each{ width:50%; padding-bottom:50px;}
.project-top .project-left { float: none; width: auto;margin-bottom: 50px;}
.project-top .project-left p { margin-bottom: 40px;}
.project-top .project-right { float: none;width: auto;}
.project-gallery li{ width:33.3%;}
.video-section{ padding-top:15px;}
.video-section:before{ height:30%;}
.section-1 ul li{ width:49%;}
.development-sec .left, .development-sec .right {  float: none; text-align: center;  width: auto;}
}


@media (min-width: 1003px) and (max-width:1150px) {
.container, .urban-ecology-sec .container, .investments-sec .container, .in-the-media .container, .policy-frameworks .container, .home-news-sec .container{ max-width:1003px;}
.policy-frameworks .container{ padding:0;}
.project-gallery li{ width:25%;}
}

@media (min-width: 768px) {
.animate-it{ opacity:0;}
.animate-it.animated{ opacity:1;}
.mobile-btn, .footer h3 i{ display:none;}
.happiness-slider-mobile{ display: none; }
}

@media (max-width: 1500px) {
.investments-sec {
    background-position: -20% 0;
}
}

@media (max-width: 1368px) {
.investments-sec {
    background-position: -30% 0;
}
.investments-sec .each:nth-child(2) {
    padding: 38px 36px;
}
}
@media (max-width: 1250px) {
.investments-sec {
    background-position: -40% 0;
}
}


@media (max-width: 1600px) {

}